

<template>
  <el-container class="home_container">
    <!--    头部-->
    <el-header>
      <div class="home_title">
        <div class="svg"></div>
        <div class="headTitle">应急事件后台管理系统</div>
      </div>
      <div class="home_userinfoContainer">
        <!-- <el-button type="danger" style="margin-right:20px" size="medium">挂起</el-button> -->
        <!--        下拉总管理事件 handle-->
        <el-dropdown @command="handle">
          <span class="el-dropdown-link home_userinfo">
            {{ currentUserName
            }}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <el-dropdown-item command="sysMsg">设置地区</el-dropdown-item> -->
            <!-- <el-dropdown-item command="MyArticle">我的文章</el-dropdown-item>
            <el-dropdown-item command="MyHome">个人主页</el-dropdown-item> -->
            <el-dropdown-item command="logout" divided
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <span style="margin-left: 20px"><i class="el-icon-location-outline">&nbsp;</i>武汉市</span>
      </div>
    </el-header>


    <el-container>
      <!--      侧边栏-->
      <el-aside width="200px">
        <!--        router属性激活菜单，以index为path进行路由跳转-->
        <!-- rgb(196, 220, 242) -->
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          style="background-color: rgb(255, 255, 255) ;"
          router
        >
          <template
            v-for="(item) in this.$router.options.routes[2].children"
          >
            <!--            无子目录的-->
            <template >
              <el-menu-item :index="item.path">
                <i :class="item.iconCls">&nbsp;</i>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-aside>

      <!-- 内容部分 -->
    
        <el-main>
          <!-- 面包屑 -->
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right"> -->
            <!--            :to,链接-->
            <!-- <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-text="this.$router.currentRoute.name"
            ></el-breadcrumb-item>
          </el-breadcrumb> -->

          <!-- 对页面进行缓存，带keepalive的会被缓存，其他不会被缓存 -->
          <keep-alive>
            <router-view v-if="this.$route.meta.keepAlive"></router-view>
          </keep-alive>
            <router-view v-if="!this.$route.meta.keepAlive"></router-view>
        </el-main>
        

    </el-container>
  </el-container>
</template>
<script>
import { getRequest } from "../utils/api";
import "../css/Home.css";

export default {
  methods: {
    handle(command) {
      //右侧下拉框事件
      let _this = this;
      if (command == "logout") {
        this.$confirm("注销登录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(
          function () {
            //getRequest("/logout")
            //_this.currentUserName = '游客';
            _this.$router.replace({ path: "/" }); //跳回登录界面
          },
          function () {
            //取消
          }
        );
      }
    },
  },
  mounted: function () {
    //初始化完成后执行，钩子函数
    // this.$alert('为了确保所有的小伙伴都能看到完整的数据演示，数据库只开放了查询权限和部分字段的更新权限，其他权限都不具备，完整权限的演示需要大家在自己本地部署后，换一个正常的数据库用户后即可查看，这点请大家悉知!', '友情提示', {
    //   confirmButtonText: '确定',
    //   callback: action => {
    //     //回调
    //   }
    // });
    // let _this = this;
    // //从后台取数据
    // getRequest("/currentUserName").then(
    //   function (msg) {
    //     _this.currentUserName = msg.data;
    //   },
    //   function (msg) {
    //     _this.currentUserName = "管理员";
    //   }
    // );
  },

  data() {
    return {
      currentUserName: "管理员",
    };
  },
};
</script>




 <!-- 有子目录的
            <el-submenu
              :index="index"
              v-if="item.children.length > 1"
              :key="index"
            >
              <template slot="title">
                <i :class="item.iconCls">&nbsp;</i>
                <span style="cursor: pointer">{{ item.name }}</span>
              </template>
              <el-menu-item
                v-for="child in item.children"
                v-if="!child.hidden"
                :index="child.path"
                :key="child.path"
              >
                {{ child.name }}
              </el-menu-item>
            </el-submenu> -->